<template>
  <div class="infoBox" id="infoBox">
    <div
      class="infoList"
      :class="item.my ? 'uninfoList' : ''"
      v-for="(item, index) in infoList"
      :key="index"
    >
      <img
        :src="item.image"
        alt=""
      />
      <div class="infoUser">
        <div class="titelText">{{item.title}}</div>
        <span class="infoText">
          {{item.info}}
        </span>
      </div>
      <div class="null"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    infoList: {
      type: Array,
    },
  },
  data() {
    return {};
  },

  //计算属性，会监听依赖属性值随之变化
  computed: {},

  //状态监听
  watch: {},

  //过滤器
  filters: {},

  //方法
  methods: {},

  //组件
  components: {},

  //生命周期 - 实例完成
  created() {},

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.uninfoList {
  flex-direction: row-reverse;
  text-align: right;
}
.infoList {
  display: flex;
  padding-top: 10px;
  word-break: break-all;
  background-color: transparent;
  img {
    height: 40px;
    width: 40px;
    border-radius: 6px;
    margin: 0 10px;
  }
  .infoUser {
    flex: 1;
    .infoText {
      display: inline-block;
      padding: 5px 10px;
      margin-top: 2px;
      border-radius: 6px;
      width: auto;
      text-align: left;
      background-color: white;
      font-size: 14px;
    }
  }
  .null {
    width: 15%;
  }
}
</style>
